:root {
   --color-white: #ffffff;
   --color-lightgrey: #f9f9fa;
   --color-grey: #6f757c;
   --color-black: #333333;
   --color-blue: #009ade;
   --color-light-orange: #ffca3a;
   --color-light-red: #ff595e;

   --font-title: 3.5rem "Boogaloo", cursive;
   --font-subtitle: 1.4rem "Boogaloo", cursive;
   --font-paragraph: 0.9rem "Ubuntu", sans-serif;
   --font-small: 0.8rem "Ubuntu", sans-serif;
   --font-button: 0.8rem "Ubuntu", sans-serif;

   --transitions1: all 0.2s ease 0s;
   --transitions2: all 0.2s ease 0.2s;
   --transitions3: all 0.7s ease 0s;
   --animation: element 4s linear infinite 0s;

   --shadow1: 0 0 4px rgba(63, 63, 63, 0.1);
   --shadow2: 0 5px 15px rgba(63, 63, 63, 0.2);
}

html {
   scroll-behavior: smooth;
}

h1 {
   font: var(--font-title);
}

h2,
h3,
h4,
h5,
h6 {
   font: var(--font-subtitle);
}

p {
   font: var(--font-paragraph);
}

/* ############################################## Header ############################################## */

#header {
   background-color: var(--color-grey);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   max-height: 95vh;
   min-height: 750px;
   position: relative;
   width: 100%;
}

/* ------------ Video ------------ */

#header .header_video {
   display: flex;
   justify-content: center;
   width: 100%;
   height: 100%;
   overflow: hidden;
   position: absolute;
   z-index: 0;
}

#header .header_video > video {
   position: absolute;
   min-height: 100%;
   min-width: 100%;
   z-index: 0;
   transform: translateY(-20%);
}

.overlay {
   background-color: var(--color-black);
   mix-blend-mode: multiply;
   filter: brightness(110%);
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   opacity: 0.5;
   z-index: 1;
}

/* ------------ Nav ------------ */

#nav {
   height: 68px;
   margin: 2em 0 0.6rem;
   position: relative;
   z-index: 2;
}

#nav .nav_header {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   flex-direction: row;
   flex-wrap: wrap;
   gap: 0.3rem;
}

#nav img {
   height: 68px;
   margin-left: 5px;
}

#nav .logo_mic {
   flex-grow: 1;
   flex-shrink: 1;
   align-self: flex-start;
}

#nav .nav_button,
#nav .nav_button-terminos {
   background-color: var(--color-blue);
   border-radius: 20px;
   box-shadow: var(--shadow1);
   padding: 5px 0;
   position: relative;
   transition: var(--transitions1);
   min-width: 180px;
   text-align: center;
}

#nav .nav_button-terminos {
   text-align: center;
}

#nav .nav_button:hover,
#nav .nav_button-terminos:hover {
   background-color: var(--color-white);
   box-shadow: var(--shadow2);
   min-width: calc(200px + 0.5em);
}

#nav .nav_button > a,
#nav .nav_button-terminos > a {
   color: var(--color-white);
   display: inline-block;
   font: var(--font-button);
   text-decoration: none;
}

#nav .nav_button > a {
   transform: translateX(-0.3rem);
}

#nav .nav_button:hover > a,
#nav .nav_button-terminos:hover > a {
   color: var(--color-blue);
}

#nav .nav_button > a::after {
   background-image: url(../img/search.svg);
   background-size: contain;
   background-position: center center;
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
   height: 16px;
   position: relative;
   left: 12px;
   transform: translateY(2px);
   width: 16px;
}

#nav .nav_button:hover > a::after {
   filter: invert(59%) sepia(59%) saturate(5426%) hue-rotate(169deg)
      brightness(93%) contrast(101%);
}

/* ------------ Header title ------------ */

#header .header_content {
   min-height: 100%;
   width: 100%;
   z-index: 2;
}

#header .header_content .row {
   height: 100%;
}

#header .header_content .title_block {
   overflow: hidden;
}

#header .header_content .title_container {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   height: 100%;
   padding: 4em 0;
   position: relative;
   width: 100%;
}

#header .header_content .title_container h1 {
   color: var(--color-white);
   font: var(--font-title);
   font-display: initial;
   font-weight: 600;
   letter-spacing: 0.01em;
   word-spacing: 0.01em;
   line-height: 0.96;
   /* overflow-wrap: break-word; */
   margin: 0;
   overflow: visible;
   text-transform: uppercase;
   text-overflow: clip;
   /* word-break: break-all; */
   width: 100%;
}

#header .header_content .title_container p {
   color: var(--color-light-orange);
   font: var(--font-paragraph);
   font-size: 1.2em;
   margin: 1em 0;
}

#header .header_content .title_container img {
   background-color: #f1f1ef;
   border-radius: 25px;
   display: block;
   margin: 1.2em 0 1.2em 0;
   height: 50px;
   width: 50px;
}

/* ------------ Form ------------ */

#header .form_container {
   display: flex;
   justify-content: flex-end;
   height: 100%;
   position: relative;
   transition: var(--transitions3);
   width: 100%;
}

#header .form_container .iframe_form {
   background-color: #ffffff;
   border: 1px solid var(--color-light-grey);
   border-radius: 3px;
   box-sizing: border-box;
   box-shadow: var(--shadow2);
   display: flex;
   flex-direction: column;
   min-height: 550px;
   max-width: 470px;
   overflow: hidden;
   outline: 0 solid rgba(234, 0, 41, 0);
   width: 400px;
   transition: var(--transitions1);
   z-index: 10;
}

#header .form_container .iframe_form:hover {
   box-shadow: var(--shadow2);
   outline: 1px solid var(--color-black);
}

.sticky {
   position: fixed;
   top: 5vh;
}

/* #header .form_container .formulario{
            background-color: var(--color-white);
            border: 1px solid rgba(0, 154, 222, 0.5);
            border-radius: 5px;
            box-sizing: border-box;
            box-shadow: var(--shadow1);
            display: flex;
            flex-direction: column;
            height: auto;
            max-width: 470px;
            outline: 0 solid rgba(0, 154, 222, 0.5);
            width: 400px;
            padding: 2em 1.4em;
            transition: var(--transitions1);
            z-index: 10;
        }

        .sticky {
            position: fixed;
            top: 5vh;
        }

        #header .form_container .formulario:hover{
            box-shadow: var(--shadow2);
            outline: 2px solid #ffca3ab0;
        }

            #header .form_container .formulario>span{
                display: block;
                font: var(--font-subtitle);
                font-weight: 500;
                margin: 0 0 1em 0;
                text-transform: uppercase;
                color: var(--color-black);
            }

            #header .form_container .formulario label{
                color: #3F3F40;
                display: block;
                font: var(--font-paragraph);
                font-weight: 600;
                margin: 5px 0;
                text-transform: uppercase;
            }

            #header .form_container .formulario input{
                border: 1px solid var(--color-grey);
                border-radius: 5px;
                color: #898E94;
                font: var(--font-paragraph);
                font-weight: 300;
                height: 40px;
                margin: 2px 0 15px 0;
                padding: 12px;
                width: 100%;
            }

            #header .form_container .formulario input:focus{
                background-color: rgba(200, 200, 200, 0.1);
                border: 1px solid var(--color-blue);
                color: #3F3F40;
                outline: none;
            }

            #header .form_container .formulario input#agree{
                border-radius: 5px;
                height: 20px;
                margin: 0;
                width: 20px;
            }

            #header .form_container .formulario input#agree:checked{
                background-color: var(--color-blue);
            }

            #header .form_container .formulario label[for="agree"]{
                display: block;
            }

                #header .form_container .formulario label span{
                    color: var(--color-grey);
                    display: inline-block;
                    font: var(--font-small);
                    font-weight: 300;
                    margin: 0 0 0 7px;
                    text-transform: capitalize;
                    transform: translateY(-5px);
                }

            #header .form_container .formulario input[type="submit"]{
                align-self:center;
                background-color: var(--color-blue);
                border: none;
                border-radius: 20px;
                color: #ffffff;
                display: block;
                height: auto;
                margin: 1em 0 0 0;
                text-transform: uppercase;
                transition: var(--transitions1);
                width: 200px;
            }

            #header .form_container .formulario input[type="submit"]:hover{
                align-self: center;
                background-color: var(--color-light-orange);
                box-shadow: var(--shadow2);
                width: calc(200px + 0.5em);
            } */

/* ------------ Bottom decoration ------------ */

#header .header_dec {
   align-content: center;
   bottom: 0;

   width: 100%;
   z-index: 1;
}

#header .header_dec img {
   width: 100%;
   position: relative;
   transform: translateY(.1rem);
}

/* ############################################## Section ############################################## */

/* ------------ Quienes somos ------------ */

#section {
   height: auto;
   overflow: hidden;
   padding: 30px 0 60px 0;
   width: 100%;
}

#section .banner {
   background-color: #f1f1ef;
   display: block;
   height: 400px;
   object-fit: cover;
   object-position: center center;
   width: 100%;
}

#section .about {
   margin-top: 50px;
}

#section .tag_about {
   color: var(--color-grey);
   font: var(--font-paragraph);
   font-size: 0.85rem;
   letter-spacing: 0.2em;
   margin-bottom: 20px;
   text-transform: uppercase;
}

#section .tag_about span {
   display: inline-block;
   text-align: left;
   width: 100%;
}

#section .tag_about::before {
   background-color: #f9f9fa;
   border-radius: 117px;
   content: "";
   height: 100px;
   position: absolute;
   width: 100px;
   z-index: -2;
   transform: translate(-50px, 160px);
}

#section .about_container {
   background-color: var(--color-white);
   border-radius: 5px;
   box-shadow: var(--shadow1);
   box-sizing: border-box;
   padding: 2em 1.4em;
   position: relative;
   transition: var(--transitions1);
}

/* .about_container:hover {
        box-shadow: 0 5px 35px 0px rgba(0,0,0,.1);
      }
      
      .about_container:hover::before, .about_container:hover::after {
        display: block;
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: #ffd7ea;
        border-radius: 5px;
        z-index: -1;
        animation: 1s clockwise infinite;
      }
      
      .about_container:hover:after {
        background: #ffdf88;
        animation: 2s counterclockwise infinite;
      }
      
      @keyframes clockwise {
        0% {
          top: -1px;
          left: 0;
        }
        12% {
          top: -2px;
          left: 2px;
        }
        25% {
          top: 0;
          left: 1px;    
        }
        37% {
          top: 2px;
          left: 2px;
        }
        50% {
          top: 1px;
          left: 0;    
        }
        62% {
          top: 2px;
          left: -2px;
        }
        75% {
          top: 0;
          left: -1px;
        }
        87% {
          top: -2px;
          left: -2px;
        }
        100% {
          top: -1px;
          left: 0;    
        }
      }
      
      @keyframes counterclockwise {
        0% {
          top: -1px;
          right: 0;
        }
        12% {
          top: -2px;
          right: 2px;
        }
        25% {
          top: 0;
          right: 1px;    
        }
        37% {
          top: 2px;
          right: 2px;
        }
        50% {
          top: 1px;
          right: 0;    
        }
        62% {
          top: 2px;
          right: -2px;
        }
        75% {
          top: 0;
          right: -1px;
        }
        87% {
          top: -2px;
          right: -2px;
        }
        100% {
          top: -1px;
          right: 0;    
        }
      } */

#section .about_container p {
   color: var(--color-grey);
   font-weight: 300;
   line-height: 1.5em;
}

#section .about_container p span {
   color: var(--color-grey);
   font-weight: 600;
   line-height: 1.5em;
}

#section .about_container a.nav_button {
   background-color: var(--color-blue);
   border-radius: 20px;
   color: var(--color-white);
   display: inline-block;
   font: var(--font-button);
   font-weight: 500;
   height: auto;
   margin: 1em 0 0 0;
   padding: 0.9em 0;
   text-align: center;
   text-decoration: none;
   text-transform: uppercase;
   transition: var(--transitions1);
   width: 232px;
}

#section .about_container a.nav_button:hover {
   background-color: var(--color-light-orange);
   box-shadow: var(--shadow2);
   width: calc(232px + 0.5em);
}

#section .about_container > div {
   display: flex;
   justify-content: space-between;
   padding: 1em 0;
   position: relative;
   width: 100%;
}

#section .about_container > div h2 {
   font-weight: 700;
   position: relative;
   transform: translateY(-5px);
}

#section .about_container > div h2::after {
   background-color: var(--color-blue);
   border-radius: 2px;
   content: "";
   display: block;
   height: 1px;
   position: relative;
   transform: translateY(10px);
   width: 30px;
}

#section .about_container > div span {
   align-items: center;
   background-color: var(--color-white);
   border-radius: 32px;
   bottom: 15px;
   display: flex;
   justify-content: center;
   height: 50px;
   right: 0;
   position: absolute;
   width: 50px;
}

#section .about_container > div span img {
   height: 29px;
   width: 29px;
}

/* ------------ Términos ------------ */
#section .terms_container {
   flex-direction: column;
   margin-bottom: 1rem;
}

/* ------------ Licencias------------ */

#section .licencias {
   background-color: var(--color-lightgrey);
   background-repeat: no-repeat;
   background-position: calc(100% - 50px) 5vh;
   height: auto;
   margin: 60px 0;
   padding: 2em 0;
   width: 100%;
}

#section .licencias .licencias_container h2,
#section .licencias .licencias_container img {
   color: var(--color-black);
   display: block;
}

#section .licencias .licencias_container h2 {
   font-size: 1.2rem;
}

#section .licencias .licencias_container img {
   margin: 1.5em 0 0 0;
   width: 100%;
}

/* ------------ Stores------------ */

#section .stores {
   background-attachment: fixed;
   background-color: #f9f9fa;
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
   height: 400px;
   margin-top: 130px;
   position: relative;
   width: 100%;
}

#section .stores_video {
   display: flex;
   justify-content: center;
   height: 400px;
   overflow: hidden;
   position: absolute;
   top: 0;
   z-index: 0;
   width: 100%;
}

#section .stores_video > video {
   position: absolute;
   min-height: 100%;
   min-width: 100%;
   transform: translateY(-35%);
   z-index: 0;
}

#section .stores .stores_column {
   display: flex;
   height: 400px;
   flex-direction: column;
   justify-content: space-between;
   position: relative;
   z-index: 5;
}

#section .stores .stores_container {
   display: flex;
   flex-direction: column;
   position: relative;
   transform: translateY(-60px);
   width: 100%;
}

#section .stores .stores_container .tag_stores {
   color: var(--color-grey);
   font: var(--font-paragraph);
   font-size: 0.85rem;
   letter-spacing: 0.2em;
   margin-bottom: 20px;
   text-transform: uppercase;
}

#section .stores .stores_container .tag_stores span {
   display: inline-block;
   text-align: left;
   width: 100%;
}

#section .stores .stores_container .know_container {
   background-color: var(--color-white);
   border-radius: 5px;
   box-shadow: var(--shadow1);
   box-sizing: border-box;
   padding: 1em 1.4em;
}

#section .stores .stores_container .know_container > h2 {
   font-weight: 700;
   margin: 0;
   padding: 0;
   position: relative;
}

#section .stores .stores_container .know_container > h2::after {
   background-image: url(../img/pin.svg);
   background-position: center center;
   background-repeat: no-repeat;
   background-size: contain;
   content: "";
   height: 30px;
   right: 0;
   position: absolute;
   top: -1px;
   width: 30px;
}

#section .stores .stores_container .store_button {
   font-weight: 500;
   margin-top: 20px;
}

#section .stores .store_inf {
   display: flex;
   flex-direction: column;
   margin: 1em 0 0 0;
   position: relative;
   transform: translateY(60px);
}

#section .stores .store_inf .fila {
   align-items: flex-start;
   display: flex;
   justify-content: flex-start;
   height: auto;
   width: 100%;
}

#section .stores .store_inf .store_detail {
   display: flex;
   flex-direction: column;
   justify-content: center;
   margin: 0 1em 1em 0;
   position: relative;
   transition: var(--transitions1);
   width: 180px;
}

#section .stores .store_inf .store_detail:hover {
   transform: translateY(-5px);
}

#section .stores .store_inf .store_detail > img {
   align-self: center;
   background-color: var(--color-white);
   border: 1px solid var(--color-lightgrey);
   border-radius: 5px;
   box-sizing: content-box;
   height: 30px;
   padding: 10px;
   transform: translateY(10px);
   width: 30px;
}

#section .stores .store_inf .store_detail > span {
   background-color: var(--color-lightgrey);
   border-radius: 5px;
   box-sizing: border-box;
   box-shadow: var(--shadow1);
   color: var(--color-black);
   font: var(--font-paragraph);
   font-size: 0.9rem;
   padding: 1.5em 1em;
   width: 100%;
}

#section .stores .store_button {
   background-color: var(--color-blue);
   border-radius: 20px;
   color: var(--color-white);
   display: inline-block;
   font: var(--font-button);
   font-weight: 600;
   height: auto;
   padding: 0.9em 0;
   text-align: center;
   text-decoration: none;
   text-transform: uppercase;
   transition: var(--transitions1);
   width: 232px;
}

#section .stores .store_button:hover {
   background-color: var(--color-light-orange);
   box-shadow: var(--shadow2);
   width: calc(232px + 0.5em);
}

/* ############################################## Copyright ############################################## */

#footer {
   background-color: var(--color-white);
   height: auto;
   margin-top: 20px;
   padding: 1.5em 0;
   width: 100%;
}

#footer .redes {
   align-items: center;
   display: flex;
   justify-content: center;
   margin-bottom: 15px;
}

#footer .redes a {
   display: flex;
   justify-content: center;
   height: 38px;
   margin: 0 0.5em;
   width: 38px;
}

#footer .redes span {
   color: #898e94;
   margin: 0 0.5em;
}

#footer .redes a > img {
   align-self: center;
}

#footer .redes a.logo_footer {
   align-self: flex-end;
   width: auto;
}

#footer .copyright {
   color: var(--color-grey);
   font: var(--font-small);
   font-weight: 300;
   text-align: center;
}

/* ############################################## Media Queries ############################################## */

@media only screen and (max-width: 576px) {
   #header {
      max-height: 800px;
      margin-bottom: 20em;
   }

   /* ------------ Nav ------------ */
   #nav {
      position: relative;
      z-index: 10;
   }

   #nav .nav_button,
   #nav .nav_button-terminos {
      min-width: 180px;
      top: -1rem;
      position: relative;
   }

   #nav .nav_button-terminos:hover,
   #nav .nav_button:hover {
      min-width: 185px;
   }

   /* ------------ Header title ------------ */

   #header .header_content .title_container {
      display: flex;
      height: 390px;
      padding: 4em 0 2em 0;
   }

   #header .header_content .title_container p {
      font-size: 1em;
   }

   #header .header_content .title_container h1 {
      overflow: hidden;
      font-size: 2.5em;
   }

   #header .header_content .title_container img {
      margin-left: 0.3em;
   }

   /* ------------ Form ------------ */

   #header .form_container {
      display: flex;
      justify-content: center;
   }

   #header .form_container .iframe_form {
      /* height: auto; */
      max-width: 420px;
      position: relative;
      width: 100%;
   }

   /* #header .form_container .formulario{
            height: auto;
            max-width: 420px;
            position: relative;
            width: 100%;
        }

        #header .form_container .formulario input[type="submit"]{
            align-self: center;
        } */

   .sticky {
      position: relative;
      top: 0;
   }

   /* ------------ Section ------------ */

   #section .licencias {
      background-image: none;
   }

   #section .tag_about span {
      text-align: center;
   }

   #section .stores .stores_container .store_button {
      align-self: center;
   }

   /* ------------ Licencias------------ */

   #section .licencias .licencias_container h2 {
      text-align: center;
   }

   #section .licencias .licencias_container img {
      width: 70%;
      margin-left: 15%;
   }

   /* ------------ Stores ------------ */

   #section .stores .stores_container .tag_stores span {
      text-align: center;
   }

   #section .stores .store_inf .store_detail {
      margin: 0 0.5em 1em 0.5em;
      width: 100%;
   }

   #section .stores .store_inf .store_button {
      align-self: center;
   }
}

@media only screen and (min-width: 577px) and (max-width: 767px) {
   #header {
      max-height: 800px;
      margin-bottom: 20em;
   }

   /* ------------ Header title ------------ */

   #header .header_content .title_container {
      display: flex;
      height: 400px;
      padding: 3em 0 3em 0;
   }

   #header .header_content .title_container p {
      font-size: 1em;
   }

   #header .header_content .title_container h1 {
      font-size: 3em;
   }

   #header .header_content .title_container img {
      margin-left: 0.3em;
      width: 50px;
   }

   /* ------------ Form ------------ */

   #header .form_container {
      display: flex;
      justify-content: center;
   }

   #header .form_container .iframe_form {
      /* height: auto; */
      max-width: 420px;
      position: relative;
      width: 100%;
   }

   /* #header .form_container .formulario{
            height: auto;
            max-width: 420px;
            position: relative;
            width: 100%;
        }

        #header .form_container .formulario input[type="submit"]{
            align-self: center;
        } */

   .sticky {
      position: relative;
      top: 0;
   }

   /* ------------ Section ------------ */

   #section .tag_about span {
      text-align: center;
   }

   /* ------------ Licencias------------ */

   #section .licencias {
      background-image: none;
   }

   #section .licencias .licencias_container h2 {
      text-align: center;
   }

   #section .licencias .licencias_container img {
      width: 70%;
      margin-left: 15%;
   }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
   #header {
      max-height: 800px;
      margin-bottom: 2em;
   }

   /* ------------ Header title ------------ */

   #header .header_content .title_container {
      padding: 4em 0 8em 0;
   }

   /* ------------ Form ------------ */

   #header .form_container .iframe_form {
      max-width: 310px;
   }

   /* #header .form_container .formulario{
            max-width: 310px;
        } */
}

@media only screen and (min-width: 992px) {
   /* ------------ Header title ------------ */

   #header .header_content .title_container {
      padding: 4em 0 10em 0;
   }

   /* ------------ Form ------------ */

   #header .form_container .formulario {
      max-width: 470px;
   }
}